<template>
    <div class="content-container content-panel">
        <h3 class="main-title">
            <a-row align="middle" type="flex">
                <a-col :span="8" class="left">
                    <a-breadcrumb :routes="routes">
                        <template slot="itemRender" slot-scope="{ route, params, routes, paths }">
                            <span v-if="routes.indexOf(route) === routes.length - 1">
                                <span v-html="route.breadcrumbName"></span>
                            </span>
                            <router-link v-else :to="paths.join('/')">
                                <span v-html="route.breadcrumbName"></span>
                            </router-link>
                        </template>
                    </a-breadcrumb>
                </a-col>
            </a-row>
        </h3>
        <!-- 不同的组件 -->
        <div class="content">
            <div class="query-content">
                <a-form :form="form" hideRequiredMark>
                    <div class="row-container">
                        <a-form-item label="标准规则">
                            <a-select
                                :disabled="codeDisabled"
                                v-model="form.codeName"
                                placeholder="选择规则"
                            >
                                <a-select-option
                                    v-for="p in dict.ruleOptions"
                                    :key="p"
                                    :value="p"
                                >{{ p }}</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="标准编码">
                            <a-input :disabled="codeDisabled" v-model="form.code">
                                <a-tooltip slot="suffix" title="规则：xxx-xxx-xxx">
                                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
                                </a-tooltip>
                            </a-input>
                        </a-form-item>
                        <a-form-item label="标准名称">
                            <a-input :disabled="codeDisabled" v-model="form.name"></a-input>
                        </a-form-item>
                        <a-form-item label="标准类型">
                            <a-select
                                :disabled="codeDisabled"
                                v-model="form.type"
                                placeholder="选择类型"
                            >
                                <a-select-option
                                    v-for="option in dict.standardOptions"
                                    :key="option.code"
                                    :value="option.value"
                                >{{ option.label }}</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="备注">
                            <a-input :disabled="codeDisabled" v-model="form.remark"></a-input>
                        </a-form-item>
                    </div>
                </a-form>
            </div>
            <div>
                <span style="color:green;font-weight:bold">检验标准明细：</span>
                <a-button
                    v-show="!codeDisabled"
                    size="small"
                    type="primary"
                    @click="handleOpenModal('')"
                >新增</a-button>
                <a-table
                    :columns="columns"
                    :dataSource="dataSource"
                    :rowKey="record => record.id"
                    :loading="loading"
                    :pagination="false"
                >
                    <template slot="index" slot-scope="text, record, index">
                        <span>{{ index + 1 }}</span>
                    </template>
                    <!-- 操作 -->
                    <template slot="action" slot-scope="text, record, index">
                        <span v-show="!codeDisabled">
                            <a href="javascript:;" @click="handleOpenModal(record, index)">编辑</a>
                            <a-divider type="vertical" />
                            <a href="javascript:;" @click="handleDeleteRow(record, index)">删除</a>
                        </span>
                    </template>
                </a-table>
            </div>
            <a-row :gutter="24" style="margin-top:20px">
                <a-col :style="{ textAlign: 'center' }">
                    <a-button v-show="!codeDisabled" type="primary" @click="onSubmit">保存</a-button>
                    <a-button :style="{ marginLeft: '8px' }" @click="handleBack">返回</a-button>
                </a-col>
            </a-row>
        </div>
        <!-- 模态框 -->
        <add-edit-modal ref="addEditModalRef" />
    </div>
</template>

<script>
import dict from "../dict.json";
import Bus from "../../utils/Bus";
import AddEditModal from "./components/standard/AddEditModal";
const routes = [
    {
        path: "../../main/qc-standard",
        breadcrumbName: "检验标准",
    },
    {
        path: "./standardDetail",
        breadcrumbName: "新增检验标准",
    },
];
const columns = [
    {
        title: "序号",
        dataIndex: "index",
        scopedSlots: { customRender: "index" },
        width: 90,
        align: "center",
    },
    {
        title: "项目编码",
        dataIndex: "code",
        width: 100,
    },
    {
        title: "项目名称",
        dataIndex: "name",
        width: 150,
    },
    {
        title: "单位",
        dataIndex: "measureUnit",
        width: 100,
    },
    {
        title: "标准值",
        dataIndex: "standardValue",
        width: 150,
    },
    {
        title: "最大值",
        dataIndex: "maximumValue",
        width: 100,
    },
    {
        title: "最小值",
        dataIndex: "minimumValue",
        width: 100,
    },
    {
        title: "备注",
        dataIndex: "remark",
        width: 100,
    },
    {
        title: "操作",
        key: "action",
        width: 120,
        scopedSlots: { customRender: "action" },
    },
];
export default {
    components: { AddEditModal },
    data() {
        return {
            title: "",
            action: "",
            index: -1, // 点击编辑使用
            dict,
            columns,
            dataSource: [],
            codeDisabled: false,
            routes,
            form: {},
        };
    },
    methods: {
        // 打开模态框
        handleOpenModal(data, index) {
            let self = this;
            if (!data) {
                self.index = -1;
            } else {
                self.index = index;
            }
            this.$refs.addEditModalRef.openModal(data);
        },
        // 确定提交表单
        onSubmit() {
            let self = this;
            self.getParams();
            this.$store
                .dispatch(this.action, this.form)
                .then(res => {
                    if (parseInt(res.code) === 1) {
                        self.$message.success("成功");
                        self.handleBack();
                        self.$parent.init();
                    } else {
                        self.$message.error("失败" + res.msg + "(" + res.code + ")");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        getParams() {
            let _list = [];
            this.dataSource.forEach(item => {
                _list.push({
                    inspectItemCode: item.code,
                    inspectItemName: item.name,
                    measureUnit: item.measureUnit,
                    standardValue: item.standardValue,
                    maximumValue: item.maximumValue,
                    minimumValue: item.minimumValue,
                    remark: item.remark,
                    dataType: item.dataType,
                });
            });
            this.form.itemStandards = _list;
        },
        setParams(list) {
            list.forEach(item => {
                item.code = item.inspectItemCode;
                item.name = item.inspectItemName;
            });
            return list;
        },
        // 后退
        handleBack() {
            this.$router.go(-1);
        },
        // 删除行
        handleDeleteRow(record, index) {
            this.dataSource = this.dataSource.filter((item, i) => {
                return i != index;
            });
        },
    },
    mounted() {
        // debugger;
        let self = this;
        let flag = self.$route.query.flag;
        let data = self.$route.query.data;
        switch (flag) {
            case "add":
                routes[1].breadcrumbName = "新增检验标准";
                self.action = dict.action.standard.addAction;
                break;
            case "edit":
                routes[1].breadcrumbName = "编辑检验标准";
                self.action = dict.action.standard.editAction;
                self.form = data;
                self.dataSource = self.setParams(data.standardItems);
                break;
            case "view":
                routes[1].breadcrumbName = "检验标准详情";
                self.form = data;
                self.dataSource = self.setParams(data.standardItems);
                self.codeDisabled = true;
                break;
        }
        Bus.$on("standard", function (item) {
            // debugger;
            if (self.index === -1) {
                self.dataSource.push(item);
            } else {
                self.dataSource[self.index] = item;
            }
        });
    },
};
</script>
